<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/7/16 0016
  Time: 上午 10:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<html>
<head>
    <head>
        <title>Title</title>
        <script src="../../js/jquery-3.3.1.min.js" charset="utf-8"></script>
        <script src="../../js/cookie/jquery.cookie.js" charset="utf-8"></script>
        <script src="../../layui-v2.2.5/layui/layui.js" charset="utf-8"></script>
        <link rel="stylesheet" href="../../layui-v2.2.5/layui/css/layui.css" media="all">
        <style>
            [name="close"] em{
                font-size:100px;
            }

        </style>

    </head>
</head>
<body>

<div>
    <div class="layui-form-item">
        <label class="layui-form-label">卡名字</label>
        <div class="layui-input-block">
            <input type="text" name="key" id="key" value="${key}" required  lay-verify="required" placeholder="请输入卡名" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" onclick="search()">搜索</button>
        </div>
    </div>
    <script>
        /*搜索*/
        function search() {
            window.location.href="/shop/showXK?id=${id}&skId=${skId}&key="+$("#key").val();
        }


    </script>
</div>


<input type="hidden" id="id" value ="${id}">
<input type="hidden" id="skId" value="${skId}">
<input type="hidden" id ="thisPage" value ="${pageUtil.currentPage}">
<div class="layui-form">
    <form class="layui-form" action="">
        <table class="layui-table" width="100%">

            <thead>
            <tr>
                <th width="100">id</th>
                <th width="100">商品ID</th>

                <th width="100">商品名称</th>

                <th width="200">操作</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${pageUtil.list}" var="rl">
            <tr>
                <td>${rl.id}</td>
                <td>${rl.productId}</td>
                <td>${rl.productName}</td>

                <td>
                    <div class="layui-input-block">
                        <input type="checkbox" name="close"
                            ${rl.productId==skId?'checked':''} value="${rl.productId}"  lay-filter="switchK" lay-skin="switch" lay-text="已关联|未关联" />
                    </div>

                </td>
            </tr>
            </c:forEach>
            </tbody>
        </table>
    </form>
    <div id="fenye"></div>
    <script>

        layui.use('laypage', function(){
            var laypage = layui.laypage;


            laypage.render({
                elem: 'fenye'
                ,count: ${pageUtil.totalRows}
                ,limit:5//数据总数，从服务端得到
                ,curr:${pageUtil.currentPage}
                ,hash:true
                ,jump: function(obj, first){
                    //obj包含了当前分页的所有参数，比如：
                    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                    console.log(obj.limit); //得到每页显示的条数
                    //首次不执行
                    if(!first){
                        window.location.href="/shop/showSK?skId="+$('#skId').val()+"&page="+obj.curr+"&limit="+obj.limit+"&id="+$('#id').val()+"&key="+$("#key").val() ;
                    }
                }
            });

        });

    </script>
    <div id="under" style="margin-top: 3rem"></div>
    <script>

        layui.use(['form', 'table'], function () {
            var table = layui.table;
            var form = layui.form;
            table.init('parse-table-demo', { //转化静态表格

            });

            //监听指定开关
            form.on('switch(switchK)', function(data){
                 var flag=this.checked;
                // var newXkId=data.value;

                $.ajax({
                    url:'/shop/cancelSKConn',
                    type:'POST', //GET
                    async:true,    //或false,是否异步
                    data:{'id':$('#id').val(),'skId':data.value,'isConn':this.checked},
                    timeout:5000,    //超时时间
                    dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
                    beforeSend:function(xhr){
                        /*console.log(xhr)
                         console.log('发送前')*/
                    },
                    success:function(reData){
                        if(!reData.result){
                            alert(reData.msg);
                        }else{
                        if(flag){
                            me=$('#id').val();
                            window.location.href="/shop/showSK?skId="+data.value+"&id="+me+"&page="+$('#thisPage').val()+"&limit=10";
                        }
                        }

                    },
                    error:function(xhr,textStatus){
                        console.log('错误')
                        console.log(xhr)
                        console.log(textStatus)
                    },
                    complete:function(){
                        //console.log('结束')
                    }
                });


            });
        });

    </script>

</div>


<script>
    layui.use('layer', function () {
        var layer = layui.layer;
        $(document).on('click', '#add', function () {
            layer.open({
                type: 2,
                area: ['80%', '80%'],

                offset: '20px',
                shadeClose: true,
                content: '/shop/editCommodity?type=' + $("#dType").val(),
                end: function () {
                    console.log("页面要刷新");
                    window.location.reload();
                }
            });
        });
    });

    /**
     * 打开面值列表进行操作
     * @param id
     */
    function setFaceValue(id) {

        layer.open({
            type: 2,
            area: ['80%', '80%'],
            title: '面值',
            offset: '20px',
            shadeClose: true,
            content: '/shop/faceValueList?commodityId=' + id,
            end: function () {
                console.log("页面要刷新");
                window.location.reload();
            }
        });
    }

    function update(id) {
        layer.open({
            type: 2,
            area: ['80%', '80%'],

            offset: '20px',
            shadeClose: true,
            content: '/shop/editCommodity?id=' + id,
            end: function () {
                console.log("页面要刷新");
                window.location.reload();
            }
        });
    }

    function delProduct(id) {
        $.ajax({
            url: '/shop/delCommodity',
            type: 'POST', //GET
            async: true,    //或false,是否异步
            data: {
                id: id,
            },
            timeout: 5000,    //超时时间
            dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
            beforeSend: function (xhr) {
                /*console.log(xhr)
                 console.log('发送前')*/
            },
            success: function (dataA) {
                console.log(dataA);
                if (dataA.code == '000000') {
                    window.location.reload();
                    // 获得frame索引
                } else {
                    layer.msg("删除失败", {time: 1000, icon: 5});
                }
            },
            error: function (xhr, textStatus) {
                console.log('错误')
                console.log(xhr)
                console.log(textStatus)
            },
            complete: function () {
                //console.log('结束')
            }
        })
    }


</script>
</body>
</html>
